<template>
    <div class="home">
        <el-container style="height: 100%; border: 1px solid #eee">
            <el-header style="text-align: right; font-size: 12px">
                <!-- @click="exitHandler"  给组件绑定自定义事件 => 自定义事件名叫click
                @click.native="exitHandler"  给组件绑定原生事件 => 事件名叫click -->
                <el-dropdown @command="commandHandler">
                    <template>
                        <span>{{ adminname }} <i class="el-icon-setting" style="margin-left: 5px"></i></span>
                    </template>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="0">查看</el-dropdown-item>
                        <el-dropdown-item :command="1">新增</el-dropdown-item>
                        <el-dropdown-item :command="2">删除</el-dropdown-item>
                        <!-- @click.native="exitHandler" -->
                        <el-dropdown-item :command="3" >退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                    <el-menu :default-openeds="['1', '3']">
                         
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>导航一</template>
                            <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">选项1</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="2-1">选项1</el-menu-item>
                                <el-menu-item index="2-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="2-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="2-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="2-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="3-1">选项1</el-menu-item>
                                <el-menu-item index="3-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="3-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="3-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="3-4-1">选项4-1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 二级视图 (在主页/中进行切换) -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import {mapState,mapGetters,mapActions} from "vuex"
export default {
    name: "HomeView",
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
            tableData: Array(20).fill(item)
        }
    },
    computed:{
        ...mapState(["userInfo"]),
        ...mapState({
            adminname:(state)=>state.userInfo.adminname,
        }),
        ...mapGetters(["isLogin"]),
    },
    methods:{
        ...mapActions(["exitAndAndUpdateUserInfo"]),
        ...mapActions(["initAndUpdateUserInfo"]),
        exitHandler(){
            console.log("准备退出");
            // 1. 清除vuex中 userInfo
            // 2. 回登录页
            this.exitAndAndUpdateUserInfo();
            this.$router.replace("/login");
        },
        commandHandler(command){
            console.log("下拉框切换了",command);
            if(command == 3){
                this.exitAndAndUpdateUserInfo();
                this.$router.replace("/login");
            }
        }
    },
    created(){
         this.initAndUpdateUserInfo();
      },
    mounted(){
        console.log("tableData",this.tableData);
        console.log("isLogin",this.isLogin);
         if(!this.isLogin){ // 判断用户是否登录?
            this.$message.error("请先登录!");
            this.$router.push({name:"login",query:{ReturnUrl:this.$route.fullPath}})
         }
    }
}
</script>

<style  scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>